<template>
  <div class="login-body">
    <div style="display: grid;grid-template-rows: 145px 800px;">
      <InfoBar @clickBack="clickBack"></InfoBar>
      <div class="login-body-body">
        <div class="login-body-login" style="background: #F8F7F6;">
          <div class="login-body-login-title">登录</div>
          <div></div>
          <InputBox w="600px" holder="邮箱" required></InputBox>
          <div></div>
          <InputBox w="600px" holder="密码" required></InputBox>
          <div></div>
          <div class="login-body-login-checkbox">
            <div style="width:17px;height:17px;border: 2px solid #74777F;box-sizing: content-box;border-radius: 3px;margin-right: 25px;"></div>
            <div>记住密码</div>
          </div>
          <div></div>
          <div class="login-body-login-btns">
            <div class="login-body-btn login-body-btn-dark">忘记密码</div>
            <div class="login-body-btn login-body-btn-light">登录</div>
          </div>
        </div>
        <div class="login-body-login" style="background: #FFFFFF;">
          <div class="login-body-login-title">注册</div>
          <div></div>
          <div style="height: 75px;display: flex;column-gap: 30px;">
            <InputBox w="250px" holder="用户名" required></InputBox>
            <InputBox w="365px" holder="邮箱" required></InputBox>
          </div>
          <div></div>
          <div style="height: 75px;display:flex;column-gap: 24px;">
            <InputBox w="450px" holder="验证码" required></InputBox>
            <div class="login-body-sendcode">发送验证码</div>
          </div>
          <div></div>
          <div class="login-body-login-checkbox">
            <div style="width:17px;height:17px;border: 2px solid #74777F;box-sizing: content-box;border-radius: 3px;margin-right: 25px;"></div>
            <div>同意<a>隐私政策</a></div>
          </div>
          <div></div>
          <div class="login-body-login-btns">
            <div class="login-body-btn login-body-btn-light">创建</div>
          </div>
        </div>
      </div>
    </div>
    <CommonTail :EndSetNum="1"></CommonTail>
  </div>
</template>

<script>
import CommonTail from "@/components/layout/CommonTail";
import InfoBar from "@/components/layout/InfoBar";
import InputBox from "@/components/func/InputBox";
export default {
  name:'Login',
  components:{CommonTail,InfoBar,InputBox},
  methods:{
    clickBack(){
      this.$router.back();
    }
  }
}
</script>
<style scoped>
.login-body{
  width: 1728px;
  margin:0 auto;
  overflow: hidden;
}
.login-body-body{
  width: 1728px;
  height: 800px;
  display: grid;
  grid-template-columns: 50% 50%;
}
.login-body-login{
  width: 864px;
  height: 100%;
  display: grid;
  padding-left: 108px;
  padding-top: 150px;
  grid-template-rows: 60px 48px 75px 31px 75px 28px 30px 63px 70px;
}
.login-body-login-title{
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 57px;
  letter-spacing: 0.075em;
  color: #075CBA;
}
.login-body-login-input{
  height: 75px;
  background-color: #EEEDEC;
  border-radius: 20px 20px 0px 0px;
  border-bottom: 5px solid #A9C7FF;

  line-height: 75px;
  padding-left: 30px;
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.075em;
  color: #B5B5B5;
}
.login-body-login-checkbox{
  height: 30px;
  margin-left: 36px;

  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  align-items: center;
  color: #74777F;
}
.login-body-login-btns{
  height: 70px;
  margin-right: 130px;
  display: flex;
  justify-content: end;
  column-gap: 32px;
}
.login-body-btn{
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 70px;
  letter-spacing: 0.075em;
  text-align: center;
  width: 193px;
  height: 70px;
  border-radius: 52px;
  box-sizing: content-box;
}
.login-body-btn-dark{
  color: #74777F;
  border: 3px solid #74777F;
}
.login-body-btn-light{
  background: #FFB68C;
  border: 3px solid #FFB68C;
  color: #F8F7F6;
}
.login-body-sendcode{
  width: 163px;
  height: 75px;
  border: 4px solid #A9C7FF;
  box-sizing: border-box;
  border-radius: 20px;
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 67px;
  text-align: center;
  letter-spacing: 0.075em;
  color: #A9C7FF;
}
</style>